<template>
    <div class="container">
      文章列表
      <div class="add">
        <el-button type="text" @click="add">添加文章</el-button>
        
      </div>
      <div v-for="(x,i) in title" :key="i" @click="tiao(x.id)" class="zong">
        <div class="user">
          <div>
            <img :src="x.author.img" class="img">
          </div>
          <div class="name">
            {{x.author.name}}
          </div>
        </div>
        <div class="title">
          {{x.article_name}}
        </div>
        <div class="synopsis">
          {{x.synopsis}}
        </div>
        <div class="tate">
          ---{{x.issue_date}}---
        </div>
      </div>
      <BottomBar :index="1"></BottomBar>
    </div>
</template>

<script>
import BottomBar from "@/components/BottomBar.vue";
import Axios from 'axios';
export default {
    name: '',
    data() {
        return {
          title:[]
        };
    },
    props: {},

    components: {
      BottomBar,
    },

    created() {},

    mounted() {
      this.titleGet()
    },

    methods: {
      titleGet(){
        Axios.get('article/')
        .then(res => {
          console.log(res)
          if (res.data.code == 200){
            this.title = res.data.data

          }
        })
        .catch(err => {
          console.log(err)
        })
      },
      add(){
        this.$router.push('/add')
      },
      tiao(id){
        this.$router.push('/xiang?id=' + id)
      }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
.title{
  text-align: left;
  font-weight: bolder;
}

.img{
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.user{
  margin-top: 20px;
  display:flex;
  margin-bottom: 10px;
}
.name{
  margin-left: 20px;
}

.synopsis{
  margin-top: 10px;
  text-align: left;
}

.tate{
  margin-top: 10px;
  text-align:right;
}

.add{
  text-align: right;

}

.zong{
  margin-left: 20px;
  margin-right: 20px;
}
</style>
